﻿<%@ Page language="c#" AutoEventWireup="False" Inherits="ElencySolutions.ImageMap.Properties.ImageMapEditor" %>
<%@ Import Namespace="ElencySolutions.ImageMap.Properties" %>
<%@ Import Namespace="EPiServer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Image Map Editor</title>
    <style type="text/css">
    html, body {
	    height: 100%;
	    overflow: auto;
    }
    body {
	    padding: 0;
	    margin: 0;
    }
    #silverlightControlHost {
	    height: 100%;
	    text-align:center;
    }
    
    body{font-size:62.5%;}
    p{font-size:1.3em;}

    body{color:#333;}
    p{padding:0 0 10px 0;line-height:1.5em;}

    body{font-family:Arial,Helvetica,sans-serif;}
    h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,sans-serif;}
    h1 {margin-top:0}
    em,i{font-style:italic;}
    strong,b{font-weight:bold;}

    
    .esim-overlay{position:absolute;top:0;left:0;z-index:20;background:#000;width:100%;height:100%;}
    .esim-infoBox{z-index:20;position:absolute; width:384px;top:30px; left:30px;display:none;padding-top:12px;}
    .esim-infoBox .esim-padding{padding:15px 10px;background-color:#ebebeb;border:2px solid #003367;}
    .esim-infoBox p, .esim-infoBox h2, .esim-infoBox h3{padding-bottom:0}
    .esim-infoBox h2{font-size:1.6em;color:#003366;margin-bottom:5px;font-weight:bold;}
    .esim-infoBox h2, .infoBox h2 a{color:#003366;}
    .esim-infoBox .esim-close{position:absolute;right:10px;top:20px;font-weight:bold;}
    .esim-infoBox h3{font-size:1.3em;margin-bottom:5px;}
    .esim-infoBox p{font-size:1.2em;line-height:1.3;}
    .esim-infoBox .esim-closeWin{position:absolute;top:20px;right:10px;display:block;z-index:100;width:19px;height:21px;text-indent:-999em;overflow:hidden;}
    .esim-infoBox .esim-class-container{height:165px;overflow-y:scroll;margin-bottom:10px;}
    .esim-inner img {border:0}
    </style>
    
    <script type="text/javascript" src="<%="/Util/ElencySolutions.Silverlight.js"%>"></script>
    <script type="text/javascript" src="<%="/Util/ElencySolutions.jquery-1.4.4.min.js"%>"></script>

    <script type="text/javascript" src="<%=UriSupport.ResolveUrlFromUtilBySettings(string.Empty) + "javascript/common.js"%>"></script>
    <script type="text/javascript" src="<%=UriSupport.ResolveUrlFromUIBySettings(string.Empty) + "javascript/system.js"%>"></script>
    <script type="text/javascript" src="<%=UriSupport.ResolveUrlFromUIBySettings(string.Empty) + "javascript/system.aspx"%>"></script>
    <script type="text/javascript" src="<%=UriSupport.ResolveUrlFromUtilBySettings(string.Empty) + "javascript/episerverscriptmanager.js"%>"></script>

    <script type="text/javascript">
        function CloseWindow() {
            window.close();
        }
        function ShowInfoBox() {
            var __$width = $('body').width(),
                __$height = $('body').height(),
                __cssObj = { 'width': __$width, 'height': __$height }

            var __top = $("html").scrollTop();

            $('<div class="esim-overlay"></div><div class="esim-infoBox"><div class="esim-padding"><h1>Image map preview</h1><a href="#" class="esim-close">Close</a><div class="esim-inner"></div></div></div>')
                    .appendTo('body');

            $('div.esim-overlay').css(__cssObj);

            $('div.esim-overlay').animate({ opacity: 0.8 }, 1);

            $('a.esim-close').bind('click', function () {
                $('div.esim-infoBox').empty().remove();
                $('div.esim-overlay').fadeOut('fast', function () {
                    $('div.esim-overlay').remove();
                });
            });

            var html = $('#imageMapPreview').html();
            $(html).appendTo('div.esim-infoBox div.esim-padding div.esim-inner');

            var bodyWidth = $(window).width(); //__$width;
            __$width = $($('#imageMapPreview img')[0]).width() + 20;
            __$height = $($('#imageMapPreview img')[0]).height();

            var left = __top + 20;

            if (__$width < bodyWidth) {
                left = (bodyWidth / 2) - (__$width / 2);
            }

            $('div.esim-infoBox').css({
                'display': 'block',
                'left': left,
                'width': __$width,
                'paddingTop': 0,
                'top': __top + 20
            });
        }

        function onSilverlightError(sender, args) {
            var appSource = "";
            if (sender != null && sender != 0) {
                appSource = sender.getHost().Source;
            }

            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;

            if (errorType == "ImageError" || errorType == "MediaError") {
                return;
            }

            var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n";

            errMsg += "Code: " + iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError") {
                errMsg += "File: " + args.xamlFile + "     \n";
                errMsg += "Line: " + args.lineNumber + "     \n";
                errMsg += "Position: " + args.charPosition + "     \n";
            }
            else if (errorType == "RuntimeError") {
                if (args.lineNumber != 0) {
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " + args.charPosition + "     \n";
                }
                errMsg += "MethodName: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
        }

        var silverlightControl = null;

        function pluginLoaded(sender, args) {
            silverlightControl = sender.getHost();
        }

        function PickUrl() {
            $('#<%=PickerId%>_ctl00').val($('#CurrentUrl').val());
            var button = $('#urlPickerDiv').find('input').last();
            $(button).click();
        }

        $(document).ready(function () {
            $('#<%=PickerId%>_ctl00').bind("propertychange change", function (e) {
                silverlightControl.Content.mainPage.UrlChanged($('#Index').val(), $(this).val());
            });
        });

    </script>
</head>
<body id="bodyTag">
    <div id="content">
        <form id="form1" runat="server" style="height:100%">
        <div style="display:none" id="urlPickerDiv">
            <input type="text" id="CurrentUrl" value="" />
            <input type="text" id="Index" value="" />
            <input type="text" id="LeftText" value="<%=LanguageHelper.Translate("/elencySolutionsImageMap/left") %>" />
            <input type="text" id="TopText" value="<%=LanguageHelper.Translate("/elencySolutionsImageMap/top") %>" />
            <asp:PlaceHolder ID="UrlPickerPlaceHolder" runat="server" />
        </div>
        <div id="imageMapPreview" style="display:none;position:absolute;z-index:5000">
        </div>
        <asp:PlaceHolder ID="InvalidDataPlaceHolder" runat="server" Visible="false">
            <p><%=LanguageHelper.Translate("/elencySolutionsImageMap/specifyImageWidthAndHeight") + ((Width.Length == 0 || Width == "0" && Height.Length == 0 || Height == "0") ? LanguageHelper.Translate("/elencySolutionsImageMap/itsWidthAndHeight") : string.Empty)%>.</p>
        </asp:PlaceHolder>
        <asp:PlaceHolder ID="SilverlightPlaceHolder" runat="server" Visible="false">
            <div id="silverlightControlHost">
                <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
		          <param name="source" value="<%="/Util/ElencySolutions.ImageMap.xap"%>"/>
		          <param name="onError" value="onSilverlightError" />
		          <param name="background" value="white" />
		          <param name="minRuntimeVersion" value="3.0.40818.0" />
		          <param name="autoUpgrade" value="true" />
                  <param name="enableHtmlAccess" value="true" />
                  <param name="windowless" value="true" />
                  <param name="onLoad" value="pluginLoaded" />
                  <%--<param name="initParams" value="ImageFile=http://<%=Request.Url.Host%>:<%=Request.Url.Port%>/TestAssets/Koala.jpg,ImageWidth=450,ImageHeight=350" />--%>
                  <param name="initParams" value="ImageUrl=<%=ImageUrl%>,Width=<%=Width%>,Height=<%=Height%>,Alt=<%=AltText%>,XmlValueId=<%=XmlValueId%>,Mode=<%=Mode%>,InfoBoxId=<%=InfoBoxId%>,DefaultLinkUrl=<%=DefaultLinkUrl%>" />
		          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">
 			          <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
		          </a>
	            </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
            </asp:PlaceHolder>
        </form>
    </div>
</body>
</html>
